﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>百度有啊css圆角方案</title>
    <style>
        .box1
        {
            background: url('http://www.webjx.com/files/090213/1_134812.gif') repeat-x #1d6cb7;
            margin-top: 1em;
            position: relative;
            zoom: 1;
            width: 778px;
        }
        .box1 .tl, .box1 .tr, .box1 .bl, .box1 .br
        {
            width: 5px;
            height: 5px;
            position: absolute;
            background: url('http://www.webjx.com/files/090213/1_134819.gif') no-repeat;
            overflow: hidden;
        }
        .box1 .cc
        {
            height: 40px;
            padding: 5px;
        }
        .box1 .tl
        {
            left: 0;
            top: 0;
        }
        .box1 .tr
        {
            right: 0;
            top: 0;
            background-position: 0 -5px;
        }
        .box1 .bl
        {
            left: 0;
            bottom: 0;
            background-position: 0 -10px;
        }
        .box1 .br
        {
            right: 0;
            bottom: 0;
            background-position: 0 -15px;
        }
        .box2
        {
            border: 1px solid #84cedd;
            margin-bottom: .8em;
            position: relative;
            zoom: 1;
            width: 778px;
        }
        .box2 .tl, .box2 .tr, .box2 .bl, .box2 .br
        {
            width: 6px;
            height: 6px;
            position: absolute;
            background: url('http://www.webjx.com/files/090213/1_134832.gif') no-repeat;
            overflow: hidden;
        }
        .box2 .cc
        {
            height: 40px;
            padding: 5px;
        }
        .box2 .tl
        {
            left: -1px;
            top: -1px;
        }
        .box2 .tr
        {
            right: -1px;
            top: -1px;
            background-position: 0 -6px;
        }
        .box2 .bl
        {
            left: -1px;
            bottom: -1px;
            background-position: 0 -12px;
        }
        .box2 .br
        {
            right: -1px;
            bottom: -1px;
            background-position: 0 -18px;
        }
        .box3
        {
            position: relative;
            zoom: 1;
            padding: 1em 1.5em;
            margin: .5em 0 1em 0;
            background: #f1f6de;
        }
        .box3 .tl, .box3 .tr, .box3 .bl, .box3 .br
        {
            width: 5px;
            height: 5px;
            position: absolute;
            background: url('http://www.webjx.com/files/090213/1_134844.gif') no-repeat;
            overflow: hidden;
        }
        .box3 .cc
        {
            height: 40px;
            padding: 5px;
        }
        .box3 .tl
        {
            left: 0;
            top: 0;
        }
        .box3 .tr
        {
            right: 0;
            top: 0;
            background-position: 0 -5px;
        }
        .box3 .bl
        {
            left: 0;
            bottom: 0;
            _bottom: -1px;
            background-position: 0 -10px;
        }
        .box3 .br
        {
            right: 0;
            bottom: 0;
            _bottom: -1px;
            background-position: 0 -15px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <span class="tl"></span><span class="tr"></span>
        <div class="cc">
            <p>
                圆角一</p>
        </div>
        <span class="bl"></span><span class="br"></span>
    </div>
    <p>
    </p>
    <div class="box2">
        <span class="tl"></span><span class="tr"></span>
        <div class="cc">
            <p>
                圆角二</p>
        </div>
        <span class="bl"></span><span class="br"></span>
    </div>
    <p>
    </p>
    <div class="box3">
        <span class="tl"></span><span class="tr"></span>
        <div class="cc">
            <p>
                圆角三</p>
        </div>
        <span class="bl"></span><span class="br"></span>
    </div>
</body>
</html>
